<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>专栏课程</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">专栏课程</h3>

    </el-card>

    <el-card style="margin-top: 20px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="专栏名称：">
          <el-input v-model="name" placeholder="请输入搜素课程名称"></el-input>
        </el-form-item>
        <el-form-item label="专栏分类">
          <el-select v-model="tid" placeholder="请选择专栏分类">
            <el-option label="请选择专栏分类" value="0"></el-option>
            <el-option v-for="d in courseTypeList" :label="d.typename" :value="d.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专栏状态：">
          <el-select v-model="specialcoursestatus" placeholder="请选择专栏状态">
            <el-option label="请选择专栏状态" value="0"></el-option>
            <el-option label="上架中" value="1"></el-option>
            <el-option label="下架中" value="2"></el-option>
            <el-option label="待上架" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="searchCourse">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="searchAgain">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addCourse">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="delBatch">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <el-table
          :data="courseList"
          style="width: 100%"
          @selection-change="selectionChange">
        <el-table-column
            type="selection"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="specialcoursename"
            label="专栏名称"
            width="160">
        </el-table-column>
        <el-table-column
            prop="specialcoursecover"
            label="专栏封面"
            width="120">
          <template slot-scope="scope">
            <img :src="nginxUrl+scope.row.specialcoursecover" style="width: 50px;height: 50px;border-radius: 50%"/>
          </template>
        </el-table-column>
        <el-table-column
            prop="specialcourseprice"
            label="专栏价格"
            width="100">
        </el-table-column>
        <el-table-column
            prop="specialCount"
            label="订阅量"
            width="100">
        </el-table-column>
        <el-table-column
            prop="specialcoursestatus"
            label="专栏状态"
            width="100">
          <template slot-scope="scope">
            <span v-text="scope.row.specialcoursestatus ==1 ?'上架':'下架'"></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="insertTime"
            label="上架时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="specialcoursetype.typename"
            label="分类"
            width="120">
        </el-table-column>
        <el-table-column
            prop="courseCount"
            label="包含课程数量"
            width="120">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="warning"
                @click="edit(scope.row)">编辑
            </el-button>

            <el-button
                size="mini"
                type="primary"
                @click="Unshelve(scope.row)">下架
            </el-button>

            <el-button
                size="mini"
                type="danger"
                @click="removeUserById(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10 , 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      headerToken: {
        token:window.sessionStorage.getItem("token")
      },
      imageUrl: '',
      uploadUrl: this.$MyUrl.serverUrl + "live/upload",
      nginxUrl: this.$MyUrl.imgUrl + "course/",
      courseList: [],
      courseTypeList: [],
      courseIds: [],
      name: null,
      courseStatus: null,
      specialcoursestatus: null,
      tid: null,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      userName: "",
    };
  },
  methods: {
    edit(row){
      // alert(row.id)
      this.$router.push({
        path:"/UpdateSpecial",
        query:{
          // specialcoursename:row.specialcoursename,
          id:row.id
        }
      })
    },
    addCourse(){
      this.$router.push("/AddSpecial")
    },
    Unshelve(row) {
      if (row.specialcoursestatus != 1) {
        this.$message({
          type: "error",
          message: "该课程还未上架~",
          duration: 1000
        });
      } else {
        this.$confirm('此操作将下架该课程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

              let url = "course/Unshelve/" + row.id;
              this.$axios.put(url)
                  .then(res => {
                    if (res.data.code == 200) {
                      this.$message({
                        type: "success",
                        message: res.data.msg,
                        duration: 1000
                      });
                      //刷新页面
                      this.searchCourse();
                    } else {
                      this.$message({
                        type: "error",
                        message: res.data.msg,
                        duration: 1000
                      });
                    }
                  })
              this.$message({
                type: 'success',
                message: '下架成功!'
              });

            }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });
      }

    },
    //重置 查询
    searchAgain() {
      this.name = "";
      this.tid = "";
      this.specialcoursestatus = "";
      this.getCourseList();
    },
    //批量删除
    delBatch() {
      alert(this.courseIds);
      if (this.courseIds.length < 1) {
        this.$message({
          type: "error",
          message: "请至少选择一个数据",
          duration: 1000
        })
      } else {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {ids: this.courseIds}
          let url = "special/delBatch";
          axios({
            url: url,
            method: "delete",
            params: params,
            paramsSerializer: params => {
              return this.$qs.stringify(params, {indices: false})
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              });

              //刷新页面
              this.searchCourse();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration: 1000
          });
        });
      }
    },
    //获取选中的ids
    selectionChange(val) {
      this.courseIds = [];
      //清空ids中的id
      for (let e of val) {
        this.courseIds.push(e.id);
      }
    },
    // 单个删除课程信息
    removeUserById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            let url = "special/del/" + id;
            this.$axios.delete(url)
                .then(res => {
                  if (res.data.code == 200) {
                    this.$message({
                      type: "success",
                      message: res.data.msg,
                      duration: 1000
                    });

                    //刷新页面
                    this.searchCourse();
                  } else {
                    this.$message({
                      type: "error",
                      message: res.data.msg,
                      duration: 1000
                    });
                  }
                })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

          }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    //查询课程
    getCourseList() {
      let url = "special/clist";
      this.$axios.get(url, {
        params: {
          name: this.name,
          now: this.pageNum,
          size: this.pageSize,
          tid: this.tid,
          specialcoursestatus: this.specialcoursestatus
        }
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res)
          this.courseList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    //查询分类
    getCourseTypeList() {
      let url = "course/typelist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.courseTypeList = res.data.data;
          console.log(res.data.msg)
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    //刷新页面
    searchCourse() {
      this.pageNum = 1;
      this.getCourseList();
    },
    //更改每页多少条数据
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCourseList();
    },
    //换页
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCourseList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },

    reloadData() {
      this.searchCourse();
      this.getCourseTypeList();

    }
  },

  created() {
    console.log("123213")
    this.reloadData();
  }
};
</script>
<style lang="less" scoped>
</style>